<template>
	<uni-popup ref="rechargePopup"  type="bottom" :safe-area="false" >
		<view class="popup-content d-flex d-c" :style="{height:systemInfo.screenHeight + 'px'}">
			<view :style="{ height: systemInfo.statusBarHeight + 'px' }"></view>
			<view class="content-navigation d-flex d-r a-center j-between">
				<view class="navigation-left d-flex d-r a-center j-center" @tap="close">
				    <image src="/static/center/back.png" class="back"></image>
				</view>
				<text class="navigation-title"></text>
			    <view class="navigation-right">
			    </view>
			</view>
			<view @tap="payPopup.open()" class="top-info d-flex d-r a-center j-between">
				<view class="top-info-left">
					<text class="info-left-name">充值方式</text>
					
					<!--
					<text class="info-left-id">ID：{{memberInfo?.id}}</text>
					-->
				</view>
				<view class="top-info-right d-flex a-center">
					<view class="info-right-name">{{payType.title}}</view>
					<i class="icon icon-more-2" style="font-size: 25rpx;color: #333333;"></i>
				</view>
			</view>
			<view class="bottom-money">
				<text class="money-title">充值金额</text>
				<view class="money-info">
					<view class="money-info-amount d-flex d-r">
						<text class="money-amount-symbol">￥</text>
						<text class="money-amount-input">{{money}}</text>
					</view>
				</view>
				
				<view class="popup-keyboard">
					<view class="edit-keyboard d-flex d-r j-between wrap">
						<text @touchstart.stop="count('1')" class="edit-keyboard-button">1</text>
						<text @touchstart.stop="count('2')" class="edit-keyboard-button">2</text>
						<text @touchstart.stop="count('3')" class="edit-keyboard-button">3</text>
						<text @touchstart.stop="count('4')" class="edit-keyboard-button">4</text>
						<text @touchstart.stop="count('5')" class="edit-keyboard-button">5</text>
						<text @touchstart.stop="count('6')" class="edit-keyboard-button">6</text>
						<text @touchstart.stop="count('7')" class="edit-keyboard-button">7</text>
						<text @touchstart.stop="count('8')" class="edit-keyboard-button">8</text>
						<text @touchstart.stop="count('9')" class="edit-keyboard-button">9</text>
						<text @touchstart.stop="count('.')" class="edit-keyboard-button">.</text>
						<text @touchstart.stop="count('0')" class="edit-keyboard-button">0</text>
						<view @touchstart.stop="count('del')" class="edit-keyboard-button d-flex a-center j-center">
							<image class="keyboard-button-image" src="@/static/image/keyboard-del.png"></image>
						</view>
					</view>
					<view style="height: 60rpx;"></view>
					<tm-button
						_style="margin: 0 auto;font-weight: 600;"
						:width="630"
						:height="80"
						:shadow="-1"
						round="5"
						:linear-color="['#64F1C5', '#29DBA3']"
						linear="left"
						:fontSize="32"
						fontColor="#ffffff"
						label="充值"
						@tap="confirmPayment"
					></tm-button>
				</view>
			</view>
		</view>
	</uni-popup>
	
	<!--支付弹出框-->
	<uni-popup ref="payPopup" type="bottom" :safe-area="false" :mask-click="true">
		<view class="pay-popup">
			<view class="popup-title d-flex psr a-center j-center">
				<view class="text-title">选择支付方式</view>
				<image @tap="payPopup.close()" class="title-icon" src="@/static/image/close.png"></image>
			</view>
			<view style="height: 20rpx;"></view>
			<!--
			<view class="popup-amount">订单金额：¥10</view>
			-->
			<view class="popup-row">
				<view class="row-cell" v-for="(item,index) in paymentMethod" :key="index">
					<view class="cell-content psr d-flex a-center" :class="{selected:typeIdx == index}" @tap="choosePay(index)">
						<image v-if="item.selected" class="cell-selected" src="@/static/image/payment-selected.png"></image>
						<image class="cell-icon" :src="item.icon"></image>
						<view class="cell-title">{{item.title}}</view>
					</view>
				</view>
			</view>
			<view class="popup-button d-flex j-center">
				<tm-button class="button-button" :width="650" :shadow="-1"
				    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="onPay"
				    label="确认"></tm-button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="tsx">
	
import { ref } from 'vue';
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { userData as userDataStore } from "@/store/userData";
import { sendUserTransfer,getUserDetail } from "@/api/api";
import BigNumber from "bignumber.js";
import { systemConfig } from "@/store/systemConfig";
import { pay } from '@/hooks/pay';



const paymentMethod:any = ref([]);//支付配置
const SYSTEM_CONFIG:any = systemConfig()
const userData: any = userDataStore();
const systemInfo: any = systemInfoStore();
const rechargePopup = ref()
const directUserId = ref('')
const memberInfo:any = ref()
//选中的支付id
const typeIdx = ref(0)
const payType = ref()
const open = (id:any) => {
	directUserId.value = id
	loadData()
	money.value = ''
	paymentMethod.value = []
	
	//遍历加载支付方式
	SYSTEM_CONFIG.payType.forEach((item:any)=>{
		let icon = "";
		if(item.slimKey==1)icon="../../static/image/WeChat.png"
		if(item.slimKey==2)icon="../../static/image/Alipay.png"
		let data = {
			selected:false,//选中状态
			icon:icon,
			title:item.slimValue,
			type:item.slimKey//支付类型
		}
		paymentMethod.value.push(data)
	});
	payType.value = paymentMethod.value[typeIdx.value]
	rechargePopup.value.open()
}
const loadData = () => {
	getUserDetail({id:directUserId.value}).then((res:any) => {
		
		if(res.success){
			memberInfo.value = res.data
			console.log(memberInfo.value)
		}
	})
}
const close = () => {
	rechargePopup.value.close()
}
const money = ref('')
const count = (str:string) => {
	if(str!=="del"){
		if(str==="."){
			if(money.value.indexOf(".")===-1){
				if(money.value == ''){
					money.value += '0'+str
				}else{
					money.value += str
				}
			}
		}else{
			let a = money.value + str;
			let array  = a.split(".")
			if(array.length<=1||array[1].length<=2){
				if(Number(a)>99999999){
					uni.showToast({
					    icon: "none",
					    title: '最大金额99999999',
					    duration: 1500,
					});
				}else{
					money.value += str
				}
			}
		}
	}else{
		money.value = money.value.toString().slice(0, -1);
	}
}
const emit = defineEmits(["callback"])
//         调起支付  
const confirmPayment = () => {
   if(money.value==''){
   	   uni.showToast({
   			title:'请输入转账金额',
   			icon:'none',
   			duration:1500
   	   })
   	   return
   }
   if(money.value == '0' || money.value == '0.' || money.value == '0.0'){
   	   uni.showToast({
   			title:'输入有误',
   			icon:'none',
   			duration:1500
   	   })
   	   return
   }
   if(isNaN(parseFloat(money.value))){
   	   uni.showToast({
   			title:'输入有误',
   			icon:'none',
   			duration:1500
   	   })
   	   return
   }
   let amount = new BigNumber(money.value).multipliedBy(new BigNumber(100)).toNumber()
   
   const payParams = {
       slimType:5,
       totalAmt:amount,
       productId:"001",
       payType:typeIdx.value+1,
   }
   
   console.log('payParams')
   console.log(payParams)
   
   pay(payParams).then((res:any) => {
		emit("callback");
		rechargePopup.value.close()
   });
}
const payPopup = ref()

const choosePay = (idx:number) =>{
	typeIdx.value = idx
}
const onPay = () => {
	payType.value = paymentMethod.value[typeIdx.value]
	payPopup.value.close()
}
defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.popup-content{
	border-radius: 0;
	background-color: #f5f5f5;
	.content-navigation{
		height: 100rpx;
		.navigation-left{
			width: 108rpx;
			height: 100rpx;
			.back{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.navigation-title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 34rpx;
			color: #000000;
		}
		.navigation-right{
			width: 108rpx;
			height: 100rpx;
		}
	}
	.top-info{
		padding: 40rpx 70rpx;
		.info-left-name{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.info-right-name{
			padding-right: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
		}
		.info-left-id{
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.bottom-money{
		flex: 1;
		background-color: #ffffff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
		padding-top: 70rpx;
		.money-title{
			padding-left: 70rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}
		.money-info{
			padding: 30rpx 70rpx 0 70rpx;
			.money-info-amount{
				padding-bottom: 10rpx;
				border-bottom: 1rpx solid #E4E4E4;
				.money-amount-symbol{
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					font-size: 70rpx;
					color: #333333;
				}
				.money-amount-input{
					padding-left: 10rpx;
					height: 74rpx;
					font-family: 'din',DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					font-size: 70rpx;
					color: #333333;
				}
			}
			/*
			.money-info-button{
				padding-top: 40rpx;
				.money-info-remark{
					padding-right: 10rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
				.info-button-add{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #1DC691;
				}
				
			}
			*/
		}
		.popup-keyboard{
			width: 750rpx;
			padding: 60rpx 50rpx 60rpx 50rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			.edit-keyboard{
				width: 650rpx;
				.edit-keyboard-button{
					width: 210rpx;
					height: 100rpx;
					font-size: 40rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #333333;
					line-height: 100rpx;
					text-align: center;
					.keyboard-button-image{
						width: 50rpx;
						height: 50rpx;
					}
				}
				.edit-keyboard-button:active {  
				  background-color: rgba(0, 0, 0, 0.1);
				  border-radius: 10rpx;
				}
			}
			.confirm-button{
				padding: 40rpx 0;
			}
		}
	}
}
.pay-popup{
		padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		.popup-title{
			height: 100rpx;
			border-bottom: 1rpx solid #E4E4E4;
			.title-text{
				position:absolute;
				top:34rpx;
				left:50rpx;
				height: 32rpx;
				width: 234rpx;
			}
			.title-icon{
				position:absolute;
				top:32rpx;
				right: 30rpx;
				
				width: 36rpx;
				height: 36rpx;
			}
		}
		.popup-amount{
			padding: 30rpx 0 40rpx 40rpx;
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}
		.popup-row{
			padding-bottom: 16rpx;
			.row-cell{
				padding: 0 30rpx 20rpx 30rpx;
				
				.cell-content{
					height: 160rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0,0,0,0.06);
					border-radius: 10rpx;
					padding-left: 30rpx;
					&.selected{
						box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(0,0,0,0.06);
						border: 2rpx solid rgba(29,198,145,0.5);
					}
					.cell-selected{
						position:absolute;
						top:0;
						left: 0;
						width: 40rpx;
						height: 40rpx;
					}
					.cell-icon{
						width: 100rpx;
						height: 100rpx;
					}
					.cell-title{
						padding-left: 20rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #333333;
					}
				}
			}
		}
		.popup-button{
			.button-button{
				border-radius: 20rpx;
				margin: 0 auto;
			}
		}
	}
</style>